<template>

	<u-popup :show="showPop" mode="center" :customStyle="{'background-color':'transparent'}">
		<view class="content">

			<view class="top">
				<image :src="bgImg" mode="scaleToFill"></image>
				<view class="top-text">
					<text class="title">恭喜获得新人大礼包</text>
					<view class="text-content">
						<text>价值</text>
						
						<text style="font-size: 32upx;margin-top: 3upx;">￥</text>
						
						<text style="font-size: 58upx;">{{allAmount}}</text>
					</view>
					<text style="flex-grow: 1;"></text>
					<text class="btn" @click="goCoupon">立即查看</text>
				</view>
			</view>
			
			<image :src="closeImg" class="close-img" mode="scaleToFill" @click="showPop=false"></image>

		</view>

	</u-popup>
	

</template>

<script>
	import {getCouponDialog} from '@/common/apis/home-api.js';
	
	export default {
		data() {
			return {
				showPop: false,
				bgImg: this.baseImageUrl + 'uni_rental/优惠券弹窗背景@2x.png',
				closeImg: this.baseImageUrl + 'uni_rental/关闭@2x.png',
				allAmount: 0,
			}
		},
		computed: {
			tenantId() {
			    return this.$store.state.user.tenantId;
			},
		    deptId() {
		        return this.$store.state.user.deptId;
		    },
		},
		mounted() {
			this.getCoupon();
			// uni.$on('store_selected', res=>{
				
			// })
			
		},
		methods:{
			getCoupon(){
				getCouponDialog({
					tenantId:this.tenantId,
					applicableUnitNo:this.deptId,
				}).then(res=>{
					this.showPop = 0==res.ifWindow;
					this.allAmount = res.totalMoney;
				})
			},
			
			goCoupon(){
				this.showPop = false;
				
				uni.navigateTo({
					url:'/pages/coupon/coupon_square',
					// url:'/pages/coupon/coupon_newcustomer'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		@include flex(column);
		align-items: center;
	}
	
	.top {
		position: relative;
		width: 576upx;
		height: 580upx;

		image {
			width: 100%;
			height: 100%;
		}

		.top-text {
			position: absolute;
			z-index: 2;
			height: 580upx;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

	}

	.title {
		margin-top: 162upx;
		color: #FFFBD7;
		font-size: 36upx;
		font-weight: bold;
		white-space: nowrap;
	}

	.text-content {
		margin-top: 20upx;
		display: flex;
		align-items: flex-start;

		
		text{
			color: #FFFBD7;
			font-size: 52upx;
			font-weight: bold;
			white-space: nowrap;
			font-family: Impact, Impact-Regular;
		}
		
	}

	.btn {
		width: 360upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #A31E23;
		background: linear-gradient(to bottom, #FFEEA1, #FFD86C, #FFCA3C);
		border-radius: 50upx;
		margin-bottom: 16upx;
		font-weight: bold;

	}
	
	.close-img{
		width: 60upx;
		height: 60upx;
		margin-top: 40upx;
		margin-bottom: 100upx;
	}
</style>
